import { observer } from 'mobx-react';
import ChartsConfig from '../../../config/ChartsConfig';
import ChartStore from '../../../stores/ChartStore';
import './Chart.scss';
import { OptionType } from '../../../models/ChartModels';

export const ChartLine = observer(() => {
    var lineOption = ChartsConfig.basicOptions[2];
    var icon = ChartStore.iconMap[lineOption.id];
    return (
        <li key={222} onClick={() => {
            ChartStore.setCurrentOption(lineOption.id)
        }} >
            <img alt='' className="highcharts-menu-item-btn" src={icon}></img>
            {ChartStore.currentOptionId === lineOption.id && <ul id={`optionMenu${lineOption.id}`}>
                {lineOption.options.map((option, i) => (
                    <li key={i} className="chart-line" title={option.label} onClick={() => {
                        if (option.type === OptionType.seriesOhlc) {
                            ChartsConfig.seriesType = 'ohlc';
                            } else if (option.type === OptionType.seriesLine) {
                            ChartsConfig.seriesType = 'line';
                            } else if (option.type === OptionType.seriesCandlestick) {
                            ChartsConfig.seriesType = 'candlestick';
                            }
                            
                            ChartStore.setRange(undefined,true);
                            ChartStore.onTypePicked(lineOption.id, option.icon,option.type);
                    }} >
                        <img alt='' className="highcharts-menu-item-btn" src={option.icon}></img>
                        <span className="highcharts-menu-item-title">{option.label}</span>
                    </li>
                ))}
            </ul>}
        </li>
    );
});